import { Col, Modal, Row } from "antd";
import success from "../../assets/success.png";
import code from "../../assets/code.png";

import "./index.scss";
const CustomModal = (props: { isOpen: boolean; onCancel: (e: any) => void; imgSrc?: string }) => {
	const { imgSrc = code } = props;
	return (
		<Modal
			open={props.isOpen}
			onCancel={props.onCancel}
			footer={null}
			className='alibaba-custom-modal-container'
			// styles={{ wrapper: { width: '295px', margin: 'auto' }, body: { width: '295px' } }}
		>
			<div className='custom-modal-content'>
				<Row justify={"center"}>
					<Col>
						<img src={success} className='modal-success-img' />
					</Col>
					<Col>
						<Row justify={"center"}>
							<Col>
								<div className='title'>提交成功</div>
							</Col>
						</Row>
						<Row justify={"center"}>
							<Col>
								<span className='message'>已为您分配专属阿里巴巴跨境顾问，</span>
							</Col>
							<Col>
								<span className='message'>外贸趋势、行业报告等大量优质内容免费等你获取!</span>
							</Col>
						</Row>
						{/* <Row justify={"center"}>
							<Col>
								<span className='message'>外贸趋势、行业报告等大量优质内容免费等你获取!</span>
							</Col>
						</Row> */}
					</Col>
					<Col>
						<div className='modal-code-img-container'>
							<img src={imgSrc} alt='' className='modal-code-img' />
						</div>
					</Col>
					<Col span={24}>
						<Row justify={"center"}>
							<Col>
								<div className='modal-code-info'>扫码咨询企微客服</div>
							</Col>
						</Row>
					</Col>
				</Row>
				<div className='modal-footer orange-background'></div>
			</div>
		</Modal>
	);
};

export default CustomModal;
